---
title: 'Svelte component'
description: 'Learn how to use the Schedule-X calendar in a Svelte application'
---

import SvelteIcon from "../../../../components/partials/logos/svelte-icon";

# <SvelteIcon /> Svelte component

This page offers documentation for using the Schedule-X calendar in Svelte. For general documentation on
configuring the calendar, refer to the rest of the documentation.

## Installing

import { Tabs } from 'nextra/components'

<Tabs items={['npm', 'pnpm', 'yarn']}>
  <Tabs.Tab>
    ```bash copy
      npm install @schedule-x/svelte @schedule-x/calendar @schedule-x/theme-default temporal-polyfill
    ```
  </Tabs.Tab>

  <Tabs.Tab>
    ```bash copy
      pnpm install @schedule-x/svelte @schedule-x/calendar @schedule-x/theme-default @preact/signals preact temporal-polyfill
    ```
  </Tabs.Tab>

  <Tabs.Tab>
    ```bash copy
      yarn add @schedule-x/svelte @schedule-x/calendar @schedule-x/theme-default @preact/signals preact temporal-polyfill
    ```
  </Tabs.Tab>
</Tabs>

import {Callout} from "nextra/components";

<Callout type="info">
  Curious about the `temporal-polyfill` package? Read more [here](/docs/calendar/temporal).
</Callout>

If you're using a package manager that does not automatically
download peer dependencies, you will additionally need to install `@schedule-x/calendar`, `@preact/signals` and
`preact`. This is for example the case for **yarn** and **npm < v7**.

## Basic usage

### Example

```svelte
<div>
	<ScheduleXCalendar calendarApp="{calendarApp}" />
</div>

<script lang="ts">
	import { ScheduleXCalendar } from '@schedule-x/svelte';
	import { createCalendar, createViewDay, createViewWeek } from '@schedule-x/calendar';
	import '@schedule-x/theme-default/dist/index.css';
	import 'temporal-polyfill/global'

	const calendarApp = createCalendar({
		views: [createViewDay(), createViewWeek()],
		events: [
			{
				id: '1',
				title: 'Event 1',
				start: Temporal.PlainDate.from('2024-07-06'),
				end: Temporal.PlainDate.from('2024-07-06'),
			},
			{
				id: '2',
				title: 'Event 2',
				start: Temporal.ZonedDateTime.from('2024-07-06T02:00:00+09:00[Asia/Tokyo]'),
				end: Temporal.ZonedDateTime.from('2024-07-06T04:00:00+09:00[Asia/Tokyo]'),
			},
		]
	})
</script>
```

### Explanation

#### The calendar instance

The `createCalendar` function takes a [configuration object](/docs/calendar/configuration) as its single argument,
and returns an instance of the calendar app. The calendar instance contains some methods that you can use to
interact with the calendar events and toggle between light and dark mode. For more on this, refer to the rest of the
calendar docs.

#### The component

The `ScheduleXCalendar` component then takes the calendar instance as a prop `calendarApp` and renders the calendar
for you. This means you should not call the `render` method of the calendar instance yourself, as shown in other
examples in the docs.

## Styles

The Schedule-X calendar is a responsive component. To achieve this,
it cannot be delivered with a fixed height or width of its own. You need to define the height and width of the
wrapping element `.sx-svelte-calendar-wrapper` according to your needs. For a regular desktop application, something
like this might do the trick for you:

```css
.sx-svelte-calendar-wrapper {
  width: 1200px;
  max-width: 100vw;
  height: 800px;
  max-height: 90vh;
}
```

## Slots & custom components

Schedule-X is built with customization in mind. Therefore, you can take control over many parts of the
UI of the calendar, by passing your own Svelte components as props. Currently, these components
can be customized:

| Slot / Component name       | Description                                                         | Props                           |
|-----------------------------|---------------------------------------------------------------------|---------------------------------|
| `timeGridEvent`             | The component for timed events used in the week- and day views      | `calendarEvent`                 |
| `dateGridEvent`             | The component for all-day events used in the week- and day views    | `calendarEvent`                 |
| `weekGridDate`              | Replaces the day name and date in the header of day- and week views | `date`                          |
| `weekGridHour`              | Replaces the hour in the time axis of day- and week views           | `hour`, `gridStep`              |
| `monthGridEvent`            | The component for events used in the month grid view                | `calendarEvent`, `hasStartDate` |
| `monthGridDayName`          | Replaces day names like "Mon", "Tue" in month grid                  | `day` (0-6, like in JS-dates)   |
| `monthGridDate`             | Replaces date of month in month grid                                | `date`, `jsDate`                |
| `monthAgendaEvent`          | The component for events used in the month agenda view              | `calendarEvent`                 |
| `eventModal`                | The component for the modal that opens when clicking an event       | `calendarEvent`                 |
| `headerContentLeftPrepend`  | Prepends content to the left part of the header                     | `$app`                          |
| `headerContentLeftAppend`   | Appends content to the left part of the header                      | `$app`                          |
| `headerContentRightPrepend` | Prepends content to the right part of the header                    | `$app`                          |
| `headerContentRightAppend`  | Appends content to the right part of the header                     | `$app`                          |
| `headerContent`             | Replaces the whole header content                                   | `$app`                          |
| `sidebarAddEventButton`     | "Add event" button in the sidebar plugin                            | `onClick`                       |
| `resourceEvent`             | Event element in resource scheduler                                 | `calendarEvent`, `resource`     |

[Visual overview of all components](/docs/calendar/custom-components)

### Custom component example

```svelte
// TimeGridEvent.svelte
<div>
	{calendarEvent.title}
</div>

<script lang="ts">
	export let calendarEvent;
</script>
```

```svelte
// App.svelte
<div>
	<ScheduleXCalendar calendarApp="{calendarApp}" timeGridEvent="{TimeGridEvent}" />
</div>

<script lang="ts">
	import { ScheduleXCalendar } from '@schedule-x/svelte';
	import { createCalendar, createViewDay, createViewWeek } from '@schedule-x/calendar';
	import '@schedule-x/theme-default/dist/index.css';
	import TimeGridEvent from '$lib/TimeGridEvent.svelte';
	import 'temporal-polyfill/global'

	const calendarApp = createCalendar({
		views: [createViewWeek(), createViewDay()],
		events: [
			{
				id: '2',
				title: 'Event 2',
				start: Temporal.ZonedDateTime.from('2024-07-06T02:00:00+09:00[Asia/Tokyo]'),
				end: Temporal.ZonedDateTime.from('2024-07-06T04:00:00+09:00[Asia/Tokyo]'),
			},
		]
	})
</script>
```

## Links

Svelte example: https://github.com/schedule-x/svelte-example


